import { createHashRouter } from "react-router-dom";
import { lazy, Suspense } from "react";

const Framework = lazy(() => import("@/components/Framework"));
const AuthRoute = lazy(() => import("@/components/AuthRoute"));
const Home = lazy(() => import("@/pages/Home"));
const Login = lazy(() => import("@/pages/Login"));
const Register = lazy(() => import("@/pages/Register"));
const UserList = lazy(() => import("@/pages/UserList"));
const AccessControl = lazy(() => import("@/pages/AccessControl"));
const LoginFailure = lazy(() => import("@/pages/LoginFailure"));
const ChatRoom = lazy(() => import("@/pages/ChatRoom"));
const NotFound = lazy(() => import("@/pages/NotFound"));

const router = createHashRouter([
  {
    path: "/",
    element: (
      <AuthRoute>
        <Suspense fallback={<div>Loading...</div>}>
          <Framework />
        </Suspense>
      </AuthRoute>
    ),
    children: [
      {
        index: true,
        element: <Home />,
      },
    ],
  },
  {
    path: "/userList",
    element: (
      <AuthRoute>
        <Suspense fallback={<div>Loading...</div>}>
          <Framework />
        </Suspense>
      </AuthRoute>
    ),
    children: [
      {
        index: true,
        element: (
          <AuthRoute>
            <Suspense fallback={<div>Loading...</div>}>
              <UserList />
            </Suspense>
          </AuthRoute>
        ),
      },
      {
        path: "accessControl",
        element: (
          <AuthRoute>
            <Suspense fallback={<div>Loading...</div>}>
              <AccessControl />
            </Suspense>
          </AuthRoute>
        ),
      },
    ],
  },
  {
    path: "/chatRoom",
    element: (
      <AuthRoute>
        <Suspense fallback={<div>Loading...</div>}>
          <Framework />
        </Suspense>
      </AuthRoute>
    ),
    children: [
      {
        index: true,
        element: (
          <AuthRoute>
            <Suspense fallback={<div>Loading...</div>}>
              <ChatRoom />
            </Suspense>
          </AuthRoute>
        ),
      },
    ],
  },
  {
    path: "/login",
    element: (
      <AuthRoute>
        <Suspense fallback={<div>Loading...</div>}>
          <Login />
        </Suspense>
      </AuthRoute>
    ),
  },
  {
    path: "/register",
    element: (
      <AuthRoute>
        <Suspense fallback={<div>Loading...</div>}>
          <Register />
        </Suspense>
      </AuthRoute>
    ),
  },
  {
    path: "/notFound",
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <NotFound />
      </Suspense>
    ),
  },
  {
    path: "/loginFailure",
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <LoginFailure />
      </Suspense>
    ),
  },
]);

export default router;
